<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />
    <meta name="renderer" content="webkit" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>宠物信息</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <link rel="stylesheet" href="#(CPATH)/view/css/jquery-weui.css" />
    <link rel="stylesheet" href="#(CPATH)/view/css/style.css" />
    <script src="#(CPATH)/view/js/jquery.js"></script>
    <script src="#(CPATH)/view/js/lib.js"></script>
    <script src="#(CPATH)/view/js/jquery-weui.js"></script>
    <script type="text/javascript" src="#(CPATH)/view/layer_mobile/layer.js"></script>
    <script type="text/javascript" src="#(CPATH)/view/laydate/laydate.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
</head>

<body class=" ">
    <!-- 头部 -->
    <!-- 头部 -->
    <!-- 内容 -->
    
    <div class="main">
        <div class="m-pic02 js-pop">
            #if(petAnimal.pic??'' == '')
            	<img src="#(CPATH)/view/images/j-p10.jpg" alt="" id="image_url">
	        #else
	        	<img src="#(CPATH)#(petAnimal.pic??'')" alt="" id="image_url">
	        #end
            <div class="js-txt txt-name">我的宝贝：<span class="js-span1">#(petAnimal.name??'')</span></div>
        </div>
        <form action="" method="" class="m-form1">
        	<input type="hidden" title="need" id="pic" name="pic" value="#(petAnimal.pic??'')">
        	<input type="hidden" name="id" id="id" value="#(petAnimal.id??'')" >
            <div class="item">
                <span>昵称</span>
                <div class="r-con">
                    <input type="text" title="need" placeholder="请输入宠物昵称" id="name" name="name" maxlength="10" class="js-inp1" value="#(petAnimal.name??'')"/>
                </div>
            </div>
            <div class="item">
                <span>类别</span>
                <div class="r-con">
                    <input type="text" class="a-select inp" id="category" onchange="changeBreed()"
                    value="#(petAnimal.category??'')">
                </div>
            </div>
            <div class="item">
                <span>品种</span>
                <div class="r-con">
                    <input type="text" class="a-select inp" id="breed" value="#(petAnimal.breed??'')">
                </div>
            </div>
            <div class="item">
                <span>性别</span>
                <div class="r-con">
                    <input type="text" class="a-select inp" id="sex" value="#(petAnimal.sex??'')">
                </div>
            </div>
            <div class="item">
                <span>生日</span>
                <div class="r-con">                    
                    #if(petAnimal.birthday??'' == '')
			        	<input type="text" title="need" placeholder="请选择日期" id="birthday" name="birthday" value=""/>
			        #else
			        	<input type="text" title="need" placeholder="请选择日期" id="birthday" name="birthday" value="#date(petAnimal.birthday, 'yyyy-MM-dd')"/>
			        #end
                </div>
            </div>
            <div class="item">
                <span>爱好</span>
                <div class="r-con">
                    <input type="text" id="hobby" value="#(petAnimal.hobby??'')"/>
                </div>
            </div>
            <div class="item item-l">
                <span>绝育</span>
                <div class="r-con">
                    <input type="text" class="a-select inp" id="sterilize" value="#(petAnimal.sterilize??'')">
                </div>
            </div>
            <input type="button" class="sub" value="提交" onclick="save();"/>
        </form>
        <div class="pop-z1" style="display: none;">
            <div class="pop-body">
                <div class="item">
                    <a href="javascript:choicePicture();">更换爱宠头像</a>
                </div>
                <div class="item">
                    <a href="javascript:;" class="js-close">取消</a>
                </div>
            </div>
        </div>
        <script>
            $(function() {
                $('.js-inp1').keyup(function(e) {
                    $(".js-span1").text(e.target.value)
                });
                
                wx.config({
            	    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            	    appId: '#(appId)', // 必填，公众号的唯一标识
            	    timestamp: #(timestamp), // 必填，生成签名的时间戳
            	    nonceStr: '#(noncestr)', // 必填，生成签名的随机串
            	    signature: '#(signature)',// 必填，签名
            	    jsApiList: [
            			'chooseImage',
            			'previewImage',
            			'uploadImage',
            			'downloadImage'            
            	    ] // 必填，需要使用的JS接口列表
            	});
                
                wx.ready(function(){

            	});

            	wx.error(function(res){
            	});
                
                laydate.render({
                	  elem: '#birthday' //指定元素
                	});
            })
            $("#category").select({
                title: "类别",
                items: ["狗", "猫"]
            });
            $("#breed").select({
                title: "品种",
                items: [""]
            });
            $("#sex").select({
                title: "性别",
                items: ["小哥哥", "小姐姐"]
            });
            $("#sterilize").select({
                title: "是否绝育",
                items: ["已绝育", "未绝育"]
            });
            $(".js-pop").click(function() {
                $(".pop-z1").stop().fadeIn();
            });
            $(".js-close").click(function() {
                $(".pop-z1").stop().fadeOut();
            });
            $("#birthday").focus(function(){
                document.activeElement.blur();
            });
        </script>
        
        <script>

function save(){
	var nameStr = $("#name").val();
	if(nameStr == ''){
		layer.open({
    	    content: '请输入宠物昵称！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	var categoryStr = $("#category").val();
	if(categoryStr == ''){
		layer.open({
    	    content: '请选择类别！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	
	var birthdayStr = $("#birthday").val();
	if(birthdayStr == ''){
		layer.open({
    	    content: '请输入生日！'
    	    ,skin: 'msg'
    	    ,time: 2 //2秒后自动关闭
    	  });
		return;
	}
	
	$.ajax({
		type: "post",
		url: "#(CPATH)/animal/save",
		data: {
			  "petAnimal.id": $("#id").val()
			  ,"petAnimal.name": $("#name").val()
			  ,"petAnimal.sex": $("#sex").val()
			  ,"petAnimal.pic": $("#pic").val()
			  ,"petAnimal.birthday": $("#birthday").val()
			  ,"petAnimal.category": $("#category").val()
			  ,"petAnimal.breed": $("#breed").val()
			  ,"petAnimal.sterilize":$("#sterilize").val()
			  ,"petAnimal.hobby": $("#hobby").val()
			  ,"petAnimal.category": $("#category").val()
		},
		dataType: "JSON",
		success: function(data) {
			if(data.state=='ok'){
				layer.open({
		    	    content: '保存成功！'
		    	    ,skin: 'msg'
		    	    ,time: 2 //2秒后自动关闭
		    	    ,end: function () {
		    	    	window.location.href = '#(CPATH)/view/index.html';
		            }
		    	  });
			}else{
				layer.open({
		    	    content: '保存失败！'
		    	    ,skin: 'msg'
		    	    ,time: 2 //2秒后自动关闭
		    	    
		    	  });
			}

		},
		error: function() {}
	});		  
}

var localIds = [];

function choicePicture(){
    wx.chooseImage({
        count: 1, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
        	layer.open({type: 2});
        	
            localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            
            syncUpload();
            $(".pop-z1").stop().fadeOut();
        }
    });
}
changeBreed();
function changeBreed(){
	if($("#category").val() == '猫'){
		$("#breed").select("update",{items: ["波斯猫","折耳猫"]});
	}else if($("#category").val() == '狗'){
		$("#breed").select("update",{items: ["金毛","牧羊犬"]});
	}
}

function syncUpload() {
    if (localIds.length) {
        var localId = localIds.pop();
        wx.uploadImage({
            localId: localId, // 需要上传的图片的本地ID，由chooseImage接口获得
            isShowProgressTips: 0, // 默认为1，显示进度提示
            success: function (res) {
                var mediaId = res.serverId; // 返回图片的服务器端ID，即mediaId
                //将获取到的 mediaId 传入后台 方法savePicture
                $.ajax({
					type: "post",
					url: "#(CPATH)/animal/saveImages",
					data: {
						"mediaId" : mediaId
					},
					dataType: "JSON",
					async: false,
					success: function(data) {
						$("#pic").val(data.filePath);
                    	$("#image_url").attr('src', '#(CPATH)' + data.filePath);
                    	syncUpload();
					},
					error: function() {}
				});		
            },
            fail: function (res) {
                layer.msgModal('上传图片失败，请重试')
            }
        });
    }else{
    	layer.closeAll('loading');
    }
}
</script>
    </div>
    <!-- 内容 -->
    <!-- 底部 -->
    <!-- 底部 -->
</body>
</html>